import React, { Component } from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import { directToPage } from '../../utils/extension';
import AniImage from '../AniImage';

class CourseItem extends Component{
  
  render() {
    const { data, styles, navigation, index } = this.props;

    return (
      <TouchableWithoutFeedback
        onPress={ () => directToPage(navigation, 'Detail', { courseId: data.id }) }
      >
        <View
          style={[styles.courseItem, !index && styles.courseItemFirst]}
        >
          {/* 课程图片 */}
          <View style={styles.imgView}>
            <AniImage styles={styles.imgView} uri={data.course_img}></AniImage>
          </View>
          {/* 课程标题 */}
          <View style={styles.courseName}>
            <Text style={styles.courseNameText}>{ data.course_name }</Text>
          </View>
          {/* 老师信息 */}
          <View style={styles.teacherInfo}>
            <AniImage styles={styles.teacherImg} uri={data.teacher_img}></AniImage>
            <Text style={styles.teacherName}>{data.teacher_name}</Text>
          </View>
          {/* 价格信息 */}
          <View style={styles.price}>
            <Text style={styles.priceNum}>￥{data.price}.00</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

export default CourseItem;